<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            input{
                border:1px solid red;
                /* 去除鼠标点入蓝色的边框 */
                outline: none;
            }
            textarea{
                /* 禁止伸缩 */
                resize:none;
                width: 400px;
                height: 200px;
            }
        </style>

    </head>
    <body>
        <!-- 
            input表单标签 type可以限制类型
                text：可以输入任意字符
                number只能输入数值 在web兼容性不太好 移动端兼容性较好 一般正则表达式限制
                password密码 输入内容不可见
                radio 单选框 只有加了相同的name值才可以使真正的单选框 name值命名和class一样
                checkbox 多选框 
                按钮：submit提交  reset清空
                常用属性 autofocus(自动聚焦)
                 checked默认选框选中
                  selected下拉选框默认选中
         -->
         <!-- 
             label的for值和input的id值保持一致。 就可以实现点击label文字聚焦选框效果
            id和for值和class命名规则一样
        -->
        <!-- form用来进行表单提交 action后台地址 -->
        <form action="https://www.baidu.com/">
            <label for="user">用户名</label><input type="text" id="user" autofocus>
            <!-- br换行 -->
            <br><br>
            <label for="phone">号码</label><input type="number" id="phone" autofocus>
            <br><br>
            <label for="pass">密码</label> <input type="password" id="pass">
            <br><br>
            <label for="">性别</label> <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女 <input type="radio" name="sex">未知
            <br><br>
            <label for="">爱好</label><input type="checkbox" checked> 游戏<input type="checkbox"> 看书
            <br><br>
            <label for="">自我介绍</label>
            <!-- textarea文本域 -->
            <textarea name="" id="" ></textarea>
            <br><br>
            <label for="">地址</label>
            <!-- 下拉选框 -->
            <select name="" id="">
                <option value="">广州</option>
                <option value="" selected>佛山</option>
                <option value="">汕头</option>
            </select>
            <input type="submit">
            <input type="reset">
        </form>
    </body>
</html>